@import "./colors.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

button,
input,
select,
textarea,
a {
  /* Make all interactive elements not act as handles
   * to drag the electron app window by default,
   * per the electron docs: electronjs dot org/docs/latest/tutorial/window-customization#set-custom-draggable-region
  */
  -webkit-app-region: no-drag;
}

body {
  margin: 0;
  @apply font-sans;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @apply text-chalkboard-110;
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-chalkboard-20) var(--color-chalkboard-40);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-sans;
}

.body-bg {
  @apply bg-chalkboard-10;
}

.body-bg.dark,
.dark .body-bg {
  @apply bg-chalkboard-100;
}

body.dark {
  scrollbar-color: var(--color-chalkboard-70) var(--color-chalkboard-90);
  @apply text-chalkboard-10;
}

select {
  @apply bg-chalkboard-20;
}

.dark select {
  @apply bg-chalkboard-90;
}

/* We hide the cursor if the user has turned off the textEditor.blinkingCursor setting
 * any elements that could present a blinking cursor to the user
*/
input,
textarea,
*[contenteditable] {
  caret-color: var(--cursor-color, auto);
}

::-webkit-scrollbar {
  @apply w-2 h-2 rounded-sm;
  @apply bg-chalkboard-20;
}

::-webkit-scrollbar-thumb {
  @apply bg-chalkboard-40 rounded-sm;
}

.dark ::-webkit-scrollbar {
  @apply bg-chalkboard-90;
}

.dark ::-webkit-scrollbar-thumb {
  @apply bg-chalkboard-70;
}

button {
  @apply border border-chalkboard-30 m-0.5 px-3 rounded text-xs;
  @apply focus-visible:outline-none;
}

button:hover {
  @apply border-chalkboard-40 bg-primary/5;
}

.dark button {
  @apply border-chalkboard-70;
}

.dark button:hover {
  @apply border-chalkboard-60;
}

button:disabled {
  @apply cursor-not-allowed bg-chalkboard-20/50 text-chalkboard-60 border-chalkboard-20;
}

.dark button:disabled {
  @apply bg-chalkboard-90 text-chalkboard-40 border-chalkboard-70;
}

a {
  @apply text-primary hover:hue-rotate-15;
}

.dark a {
  @apply hover:brightness-110 hover:hue-rotate-0;
}

a.action-button,
.dark a.action-button {
  @apply text-inherit no-underline hover:hue-rotate-0;
}

input {
  @apply selection:bg-primary/50;
}

.dark input {
  @apply selection:bg-primary/40;
}

.mono {
  font-family: "Source Code VF", Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

code,
#code-mirror-override .cm-content {
  font-family: "Source Code VF", Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

#code-mirror-override {
  @apply text-xs;
}

/*
 * The first descendent of the CodeMirror wrapper is the theme,
 * but its identifying class can change depending on the theme.
*/
#code-mirror-override > div,
#code-mirror-override .cm-editor {
  @apply bg-transparent h-full;
  @apply select-auto;
}

#code-mirror-override .cm-scroller {
  overflow: auto;
}

#code-mirror-override .cm-gutter {
  @apply select-none;
}

#code-mirror-override .cm-activeLine,
#code-mirror-override .cm-activeLineGutter {
  @apply bg-primary/5;
}

.dark #code-mirror-override .cm-activeLine,
.dark #code-mirror-override .cm-activeLineGutter {
  @apply bg-chalkboard-70/20;
  mix-blend-mode: lighten;
}

#code-mirror-override .cm-focused .cm-activeLine,
#code-mirror-override .cm-focused .cm-activeLineGutter {
  @apply bg-primary/10;
}

.dark #code-mirror-override .cm-focused .cm-activeLine,
.dark #code-mirror-override .cm-focused .cm-activeLineGutter {
  @apply bg-chalkboard-70/40;
}

#code-mirror-override .cm-matchingBracket {
  @apply bg-primary/20;
}

.dark #code-mirror-override .cm-matchingBracket {
  @apply bg-chalkboard-70/60;
}

#code-mirror-override .cm-gutters {
  @apply bg-chalkboard-10/30;
}

.dark #code-mirror-override .cm-gutters {
  @apply bg-chalkboard-110/50;
}

#code-mirror-override .cm-content {
  @apply caret-primary;
}

.dark #code-mirror-override .cm-content {
  @apply caret-chalkboard-10;
}

#code-mirror-override .cm-focused {
  outline: none;
}

.cm-rename-popup {
  /* we want to overpower anything else */
  z-index: 99999999999 !important;
}

.cm-rename-popup input {
  /* use black text on white background in both light and dark mode */
  color: black !important;
  background: white !important;
}

@keyframes blink {
  0%,
  100% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }
}

@keyframes send-up {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(-1000px);
  }
}

@keyframes loading-shimmer {
  100% {
    mask-position: left;
  }
}

@keyframes delta-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.react-json-view {
  @apply bg-transparent !important;
}

#code-mirror-override .cm-tooltip,
.cm-tooltip {
  @apply text-xs shadow-md;
  @apply bg-chalkboard-10 text-chalkboard-80;
  @apply rounded-sm border-solid border border-chalkboard-40/30 border-l-liquid-10;
}

.dark #code-mirror-override .cm-tooltip,
.dark .cm-tooltip {
  @apply bg-chalkboard-110 text-chalkboard-40;
  @apply border-chalkboard-70/20 border-l-liquid-70;
}

#code-mirror-override .cm-tooltip-hover,
#code-mirror-override .cm-signature-tooltip,
.cm-signature-tooltip {
  @apply py-1 px-2 w-max max-w-md;
}

#code-mirror-override .cm-completionInfo {
  @apply px-4 rounded-l-none;
  @apply bg-chalkboard-10 text-liquid-90;
  @apply border-liquid-40/30;
}

.dark #code-mirror-override .cm-completionInfo {
  @apply bg-liquid-120 text-liquid-50;
  @apply border-liquid-90/60;
}

#code-mirror-override .cm-tooltip-autocomplete li {
  @apply px-2 py-1;
}

#code-mirror-override .cm-tooltip-autocomplete li[aria-selected="true"] {
  @apply bg-liquid-10 text-liquid-110;
}

.dark #code-mirror-override .cm-tooltip-autocomplete li[aria-selected="true"] {
  @apply bg-liquid-100 text-liquid-20;
}

#code-mirror-override .cm-content {
  white-space: pre-wrap;
  word-break: normal;
  word-wrap: break-word;
}

.cm-ghostText,
.cm-ghostText * {
  color: rgb(120, 120, 120, 0.8) !important;
}

.extra-segment-handle {
  position: absolute;
  pointer-events: auto;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  color: red;
  background: #ffff00 url("/clientSideSceneAssets/extra-segment-texture.svg")
    center / 10px 10px no-repeat;
  border-radius: 100%;
  background-size: 10px 10px;
}

.extra-segment-handle.hoveringLine {
  opacity: 0.7;
}

.extra-segment-handle.selected:not(.hoveringLine) {
  opacity: 0.7;
  background-color: #0000ff;
  background-image: url("/clientSideSceneAssets/extra-segment-texture-selected.svg");
}

.extra-segment-handle:hover {
  opacity: 1;
}

.segment-length-label-text {
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--degree, 0));
  @apply font-mono body-bg px-2 pt-0.5 rounded-sm border border-chalkboard-110 dark:border-chalkboard-10;
}

@layer components {
  kbd.hotkey {
    @apply font-mono text-xs inline-block px-0.5 py-[2px] rounded;

    /* This is the only place in our code where layout is impacted by theme.
     * We may not want that later, if hotkeys are possibly visible
     * while switching theme, but more padding feels better in dark mode.
     */
    @apply dark:px-1;

    @apply text-chalkboard-70 dark:text-chalkboard-40;
    @apply bg-chalkboard-20 dark:bg-chalkboard-90;
    @apply border border-t-0 border-b-2 border-chalkboard-30 dark:border-chalkboard-80;
  }

  .home-layout {
    @apply grid lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-x-16;
    grid-template-rows: auto 1fr;
  }

  .avatar {
    @apply grid place-content-center overflow-hidden;
    @apply border rounded border-chalkboard-30/50 dark:border-chalkboard-80/30;
    @apply group-hover/avatar:border-chalkboard-30 group-hover/avatar:dark:border-chalkboard-70;
  }
}

@layer utilities {
  /** "Foreground" utilities */
  .text-default {
    @apply text-chalkboard-100 dark:text-chalkboard-10;
  }

  .text-2 {
    @apply text-chalkboard-70 dark:text-chalkboard-30;
  }

  .text-3 {
    @apply text-chalkboard-50;
  }

  .text-4 {
    @apply text-chalkboard-30 dark:text-chalkboard-70;
  }

  .text-5 {
    @apply text-chalkboard-20 dark:text-chalkboard-90;
  }

  .text-6 {
    @apply text-chalkboard-10 dark:text-chalkboard-100;
  }

  .b-default {
    @apply border-chalkboard-100 dark:border-chalkboard-10;
  }

  .b-2 {
    @apply border-chalkboard-70 dark:border-chalkboard-30;
  }

  .b-3 {
    @apply border-chalkboard-50;
  }

  .b-4 {
    @apply border-chalkboard-30 dark:border-chalkboard-80;
  }

  .b-5 {
    @apply border-chalkboard-20 dark:border-chalkboard-90;
  }

  .outline-default {
    @apply outline-chalkboard-100 dark:outline-chalkboard-10;
  }

  .outline-2 {
    @apply outline-chalkboard-70 dark:outline-chalkboard-30;
  }

  .outline-3 {
    @apply outline-chalkboard-50;
  }

  .outline-4 {
    @apply outline-chalkboard-30 dark:outline-chalkboard-80;
  }

  .outline-5 {
    @apply outline-chalkboard-20 dark:outline-chalkboard-90;
  }

  .bg-default {
    @apply bg-chalkboard-10 dark:bg-chalkboard-100;
  }

  .bg-2 {
    @apply bg-chalkboard-20 dark:bg-chalkboard-90;
  }

  .bg-3 {
    @apply bg-chalkboard-30 dark:bg-chalkboard-70;
  }

  .bg-4 {
    @apply bg-chalkboard-70 dark:bg-chalkboard-30;
  }

  .bg-5 {
    @apply bg-chalkboard-90 dark:bg-chalkboard-20;
  }

  .bg-6 {
    @apply bg-chalkboard-100 dark:bg-chalkboard-10;
  }

  /*
    This is where your own custom Tailwind utility classes can go,
    which lets you use them with @apply in your CSS, and get
    autocomplete in classNames in your JSX.
  */
  .parsed-markdown ul,
  .parsed-markdown ol {
    @apply list-outside pl-4 lg:pl-8 my-2;
  }

  .parsed-markdown ul li {
    @apply list-disc;
  }

  .parsed-markdown ol li {
    @apply list-decimal;
  }

  .parsed-markdown li p {
    @apply inline;
  }

  .parsed-markdown code {
    @apply px-1 py-0.5 rounded-sm;
    @apply bg-chalkboard-20 text-chalkboard-80;
    @apply dark:bg-chalkboard-80 dark:text-chalkboard-30;
  }

  button.reset {
    @apply bg-transparent border-transparent m-0 p-0 rounded-none text-base;
  }

  button.reset:hover {
    @apply bg-transparent border-transparent;
  }

  /* Add an outline that matches the app foreground (or text) color */
  .outline-appForeground {
    @apply outline-chalkboard-100 dark:outline-chalkboard-10;
  }

  /* highlight an object with a moving dashed outline */
  .onboarding-highlight {
    @apply outline outline-2;
    animation: onboarding-highlight 0.7s ease-in-out infinite alternate-reverse;
  }

  @keyframes onboarding-highlight {
    0% {
      outline-offset: 0px;
    }

    100% {
      outline-offset: 4px;
    }
  }
}

#code-mirror-override .cm-scroller,
#code-mirror-override .cm-editor {
  height: 100% !important;
}

/* Can't use #code-mirror-override here as we're outside of this div */
.body-bg .cm-diagnosticAction {
  @apply bg-primary;
}

.animate-shimmer {
  animation-delay: .5s;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: loading-shimmer;
  mask: linear-gradient(90deg, #000 30%, #0001, #000 70%) right / 350% 100%;
  display: inline-block;
}

.animate-delta-in {
  animation-delay: .5s;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-name: delta-in;
}

.bg-img-mel {
  background-image: url("/mleyphun.jpg");
  background-size: cover;
}
